<template>
  <div class="wisdomContainer">
    <!-- 头部 -->
    <van-nav-bar title="智慧工地"> </van-nav-bar>
    <div class="wisdomContent">
      <div class="cont">
        <div class="title f">
          <van-icon name="arrow" class="arrowq" />
          智慧工地
        </div>
        <ul class="tanul f fb">
          <li class="tanli f fn" v-for="(item, index) in tablist" :key="index" @click="torouter(item.click)">
            <img :src="item.img" alt="" />
            <p class="titlep">{{ item.title }}</p>
          </li>
        </ul>
        <div class="lineh"></div>
         <div class="title f">
          <van-icon name="arrow" class="arrowq" />
          PM管理
        </div>
 
          <ul class="tanul f ">
          <li class="tanli f fn" v-for="(item, index) in tablist1" :key="index" @click="torouter(item.click)">
            <img :src="item.img" alt="" />
            <p class="titlep">{{ item.title }}</p>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      tablist: [
        { title: "劳务实名制", click: "", img: require("./imgs/2.png") },
        { title: "扬尘监测", click: "/dustIndex", img: require("./imgs/3.png") },
        { title: "噪音监测", click: "/noiseIndex", img: require("./imgs/4.png") },
        { title: "视频监控", click: "/vedioIndex", img: require("./imgs/5.png") },
        { title: "塔吊监测", click: "/towerCrane", img: require("./imgs/6.png") },
        { title: "升降机监测", click: "/elevator", img: require("./imgs/7.png") },
        { title: "能耗监测", click: "/energy", img: require("./imgs/8.png") },
        { title: "物料溯源", click: "/materialIndex", img: require("./imgs/10.png") },
      ],
      tablist1:[
         { title: "管理助手", click: "/bookIndex", img: require("./imgs/11.png") },
        { title: "教育培训", click: "", img: require("./imgs/12.png") },
      ]
    };
  },
  methods: {
    torouter(path) {
      this.$router.push({ path: path });
    },
  },
};
</script>
<style lang="stylus" scoped>
.wisdomContainer {
  width: 100%;
  height: 100%;

  .van-nav-bar {
    width: 100%;
    height: 88px;
    // border-bottom: 1px solid #E5E5E5;
    background: #699fff;

   /deep/ .van-nav-bar__title, .van-nav-bar__left, .van-nav-bar__right {
      color: #fff !important;
      height: 87px;
      line-height: 87px;
      font-size: $font-size-title;
      z-index: 10000;
      border: none;
    }

    .van-icon-arrow-left {
      color: #fff;
      font-size: $font-size-title;
    }

    .van-nav-bar__text {
      color: #fff;
      font-size: $font-size-title;
    }
  }

  .wisdomContent {
    width: 100%;
    height: 100%;
    padding: 30px;
    box-sizing: border-box;

    .cont {
      width: 100%;
      height: 100%;
      background: #fff;

      .title {
        width: 100%;
        height: 120px;
        font-size: 30px;
        font-family: Microsoft YaHei;
        font-weight: 600;
        color: #000000;
        box-sizing: border-box;
        padding: 0 30px;

        .arrowq {
          font-size: 36px;
          color: #699fff;
          font-weight: bold;
        }
      }

      .tanul {
        width: 100%;
        flex-wrap: wrap;

        .tanli {
          width: 25%;
          margin-bottom: 40px;

          img {
            width: 106px;
            height: 106px;
            margin-bottom: 30px;
          }

          .titlep {
            font-size: 26px;
            font-family: Microsoft YaHei;
            font-weight: 400;
            color: #333333;
          }
        }
      }
      .lineh{
        width :90%;
        margin :0 auto;
        padding :20px 20px 20px;
        margin-bottom :40px;
        border-bottom :1px solid #C6D0DB;

      }
    }
  }
}
</style>